<template>
	<view class="">
		<view class="d-flex uploadImgBox">
			<view class="imageBox" v-for="(item,index) in imgArr" :key="index">
				<view class="close" @click.stop="delBefore(item,index)">
					删除
				</view>
				<image :src="item|qimg" mode="aspectFill" @click="seeImg(index)"/>
			</view>
			<view class="add" @click="pushImgs" v-show="imgArr.length<max" v-if="!hideUp">
				<view class="">
					＋
				</view>
				<view class="">
					上传图片
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			hideUp: {
				type: Boolean,
				default: false
			},
			urls: {
				type: String,
				default: ""
			},
			max: {
				type: Number,
				default: 9
			},
			images: {
				type: Array,
				default () {
					return [];
				}
			},
		},
		data() {
			return {
				imgArr: []
			}
		},
		mounted() {
			this.imgArr = [...this.images]
		},
		methods: {
			delBefore(data, index) {
				this.$emit('delBefore', data, index)
			},
			deleteImg(index) {
				this.imgArr.splice(index, 1)
				this.$emit('change', this.imgArr)
			},
			seeImg(index){
				let arrs=[]
				this.imgArr.map(item=>{
					arrs.push(this.$qimg(item))
				})
				uni.previewImage({
					urls:arrs,
					count:index
				})
			},
			pushImgs() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;

						uni.showLoading({
							title: "正在上传..."
						})
						let header = ''
						if (tempFilePaths[0].indexOf('wxfile') == -1) {
							header = {
								'Content-Type': 'application/x-www-form-urlencoded'
							}
						}
						if (!this.urls) {
							this.$toast('您还未填写路径')
							return
						}
						uni.uploadFile({
							url: this.urls, //post请求的地址
							filePath: tempFilePaths[0],
							name: 'img',
							header: header,
							formData: {
								img: tempFilePaths[0] //formData是指除了图片以外，额外加的字段
							},
							success: (uploadFileRes) => {
								//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
								let uploadData = JSON.parse(uploadFileRes.data);
								if (uploadData.errno == 0) {
									this.$toast('上传成功', 1)
									this.imgArr.push(uploadData.obj.resourceKey)
									if (this.imgArr.length > this.max) {
										this.imgArr = this.imgArr.slice(0, this.max)
									}
									this.$emit('change', this.imgArr)
								} else {
									uni.showToast(uploadData.error)
								}
							}
						})
					}
				})
			},
		}

	}
</script>

<style lang="scss" scoped>
	.uploadImgBox {
		.add {
			margin: 10rpx 0;
			@include fz(28, #CCCCCC, 30, true);
			border: 5rpx dashed #CCCCCC;
			@include boxs(150rpx, 150rpx, 10);

			>view:nth-child(1) {
				@include fz(80, false, 80);
			}
		}

		.imageBox {
			margin: 10rpx;
			position: relative;

			image {
				@include boxs(150rpx, 150rpx, 10);
			}

			.close {
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				background: rgba(250,53,52,.9);
				@include fz(22,#FFFFFF,35,true);
				@include boxs(60rpx,35rpx);
				
			}
			
			
		}
	}
</style>
